<%@ page import="com.chazz.entity.User" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/23
  Time: 21:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<% User user=(User)session.getAttribute("user"); %>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客服界面</title>
    <style>
        *{padding:0;margin:0;box-sizing: border-box;font-size: 14px;}
        ul,ol{list-style: none;}
        #container{
            margin: auto;
            width: 800px;
            height: 550px;
            border-style: solid;
            border-color: gray;
        }
        #header{
            height: 50px;
            border-bottom-style:solid;
            border-color: gray;
            text-align: center;
        }
        #article{
            width: 797px;
            height: 400px;
            display: flex;
            justify-content: space-between;
        }
        #article_left{
            width: 149px;
            height: 400px;
            position: relative;
        }
        /*.chatBox{*/
        /*    width: 540px;*/
        /*    height: 400px;*/
        /*    position: absolute;*/
        /*    left: 390px;*/
        /*    top: 50px;*/
        /*}*/
        .chatBox{
            border-style: inset;
            border-color: #00b300;
            margin-left: 30px;
            width: 550px;
            height: 403px;
            position:absolute;
            left: 116px;
            top: -3px;
        }
        #article_end{
            width: 100px;
            height: 400px;
        }
        .userList>li{
            width: 147px;
            height: 50px;
            border-style: solid;

        }
        #article_end input{
            width: 90px;
        }
        #msg{
            border-color: red;
            width: 797px;
            height: 100px;
        }
        #sub{
            height: 50px;
        }
        #article_end_top{
            height: 350px;
        }
        /*.chat li{*/
        /*    margin-top: 20px;*/
        /*    width: 200px;*/
        /*    color: white;*/
        /*    background-color: blue;*/
        /*}*/
        .userListLi>div>ul{
            display: none;
        }
        .chatRight{
            margin-left: 335px;
            border-radius: 10px;
            color: black;
            background-color: lawngreen;
            padding: 5px;
            width: 200px;
            margin-top: 20px;
        }
        .chatLeft{
            margin-left: 10px;
            border-radius: 10px;
            color: black;
            background-color:lightsteelblue;
            padding: 5px;
            width: 200px;
            margin-top: 20px;
        }
        .chatBox{
            overflow-y: auto;
        }
        #container::after {
            content: "";
            background: url(images/kebg.jpg);
            opacity: 0.3;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
        }


    </style>
</head>
<body>
<div id="container">
    <header id="header">
        <h2 id="userName">等待客户.....</h2>
        <h3 id="chatSart"></h3>
        <input type="hidden" name="userEmail" id="userEmail" value="${user.getEmail()}">
    </header>
    <article id="article">
        <div id="article_left">
            <ul class="userList" id="userList1">

            </ul>
        </div>
<%--        <div id="article_right">--%>
<%--            <ul id="chat">--%>

<%--            </ul>--%>
<%--        </div>--%>
        <div id="article_end">
            <div id="article_end_top"></div>
            <input type="button" value="发送" id="sub">
        </div>
    </article>
    <footer id="footer">
        <input type="text" size="200" value="" id="msg">
    </footer>
</div>
<script src="js/jquery-3.5.1.js"></script>
<script>
    var sendToWho="aa";
    $(document).ready(function () {
        var webSocket =null;
        var chatServerId="2312111756@qq.com";
        if('WebSocket' in window){
            webSocket=new WebSocket('ws://localhost:8080/foraging/chat');
        }else{
            alert("该浏览器不支持")
        }
        webSocket.onopen=function (event) {
            console.log("建立连接");
            webSocket.send("2312111756@qq.com`~``~绑定客服")
        }
        webSocket.onclose=function (event) {
            console.log("建立关闭");
        }
        webSocket.onmessage=function (event) {
            //console.log("收到消息:"+event.data);
            if(event.data.indexOf("`~``~")==-1){
                $("#chatSart").html(event.data);
                return;
            }
            var arr=event.data.split("`~``~");
            var getMsg=arr[0];
            var getUserId=arr[1];
            var getUserName=arr[2];
            console.log(getMsg)
            console.log(getUserName);

            var flag=false;
            //遍历userList的li(i为下标，n为元素本身)
            $('.userListLi').each(function(i,n){
                //alert($(n).text());
                //获取ID
                var getid=$(n).attr("id");

                if(getUserId == getid){

                    flag=true;
                }
            });
            //不是第一次会话
            if(flag==true){
                var getUserListId=getUserId;
                var isMe=getMsg.split(":");
                //客服自己发自己收的消息
                if(isMe[0]=="你"){
                    $("#"+getUserListId).children().children().append("<li class='chatRight'>"+getMsg+"</li>");
                    $(".chatBox").scrollTop($(".chat").height());

                }else{
                    $("#"+getUserListId).children().children().append("<li class='chatLeft'>"+getMsg+"</li>");
                    $(".chatBox").scrollTop($(".chat").height());
                }
                if(sendToWho!=getUserId){
                    $("#"+getUserListId).css("border-color","red")
                }
                //第一次会话
            }else{
                $(".userList").append("<li id='"+getUserId+"' class='userListLi' style='border-color: red'>"+getUserName+"<div  class='chatBox'><ul class='chat'><li class='chatLeft'>"+getMsg+"</li></ul></div></li>");
                $(".chatBox").scrollTop($(".chat").height());
                $(".userListLi").on("click",function () {
                    //获取兄弟元素
                    $(this).siblings().children().children().css("display","none");
                    $(this).children().children().css("display","block");
                    $(this).css("border-color","gray");
                    $("#userName").html("正与客户："+$(this).prop('firstChild').nodeValue+"聊天");
                    sendToWho=$(this).attr("id");
                });
            }

        }
        webSocket.onerror=function () {
            console.log("通信发生错误");
        }
        window.onbeforeunload=function () {
            webSocket.close();
        }
        $("#sub").on("click",function () {
            var msg=$("#msg").val();
            if(msg!=null){
                if(sendToWho=="aa"){
                    alert("选择联系人");
                    return;
                }
                msg=chatServerId+"`~``~"+msg+"`~``~"+sendToWho;
                webSocket.send(msg);
                $("#msg").val(" ");
            }
        });
        //var div = document.getElementById('scrolldIV');

    });


</script>
</body>
</html>
